import { Avatar } from "@/components/Avatar";
import { Image } from "antd";
import { IMessage } from "@/apis/message";

export function Message(props: IMessage & { isSender: boolean }) {
  return (
    <div
      className={`flex flex-col items-start ${props.isSender && "items-end"}`}
    >
      {/* 文本类型 */}
      {props.type === "Text" && (
        <div
          className={`inline-block message-content bg-[#383C4B] text-white ${
            props.isSender
              ? "rounded-s-2xl rounded-tr-2xl !bg-[#1D90F5]"
              : "rounded-e-2xl rounded-tl-2xl"
          } px-4 py-4 `}
        >
          {props.content}
        </div>
      )}

      {/* 图片类型 */}
      {props.type === "Image" && (
        <Image.PreviewGroup>
          <Image
            src={props.content}
            width={200}
            className="border-2 border-white"
          />
        </Image.PreviewGroup>
      )}

      {/* 视频类型 */}
      {props.type === "Video" && (
        <div className="inline-block max-w-[150px] rounded-xl border-2 border-[white] overflow-hidden">
          <video src={props.content} controls />
        </div>
      )}

      {/* 音频类型 */}
      {props.type === "Audio" && (
        <div className="inline-block max-w-[150px] rounded-xl border-2 border-[white]">
          <audio src={props.content} controls />
        </div>
      )}

      {/* 文档类型 */}
      {props.type === "Audio" && (
        <div className="inline-block max-w-[150px] rounded-xl border-2 border-[white]">
          <audio src={props.content} controls />
        </div>
      )}

      {props.sender && (
        <div
          className={`mt-2 flex items-center text-white ${
            props.isSender && "flex-row-reverse"
          }`}
        >
          <Avatar
            src={props.sender?.avatar}
            name={props.sender?.nickName}
            time={props.createTime}
            isSender={props.isSender}
          />
        </div>
      )}
    </div>
  );
}
